<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线工具一览</title>

    <link rel="stylesheet" href="//cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="//libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> 
    <script src="//cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>
<body>
    
    <div class="container" style="width: 90%;">
        <div class="row">
            <div class="col-md-12 col-sm-12">
                <h1>收录好用的在线工具</h1>
            </div>
        </div>
        <div class="row">
           <div class="col-md-2 col-sm-2 leftList">
            <div class="list-group">
                <a href="#" class="list-group-item active">
                    <h4 class="list-group-item-heading">
                        易语言相关
                    </h4>
                </a>
            </div>
           </div>
           <div class="col-md-10 col-sm-10">
                <iframe id="iframe" src="./welcome.html" style="width:100%;height: 80vh;" frameborder="0"></iframe>
           </div>      
        </div>
     </div>

<script>
    var urlList = {
        json:[
                    {url:'#',title:'Json转换相关'},
                    {url:'./e/jsonToE.html',title:'JSON转易代码',desc:'将json数据转换为易语言代码。','source':''},
                    {url:'./dart/javiercbk.github.io/index.html',title:'JSON转Dart类',desc:'使用flutter时，生成json解析类','source':''},
                    
                    ],

    };

    init(urlList)
    function init(urlList){
        var html = ''
        for(let group in urlList){
            
                var itemHtml = '';
            for(let i in urlList[group]){
                let item = urlList[group][i]

                if(item.url=='#'){
                    itemHtml+=`<a href="#" class="list-group-item active">
                    <h4 class="list-group-item-heading"> ${item.title}</h4>
                </a>`
                }else{
                    itemHtml+=`<a href="${item.url}" class="list-group-item">
                    <h4 class="list-group-item-heading">${item.title}</h4>
                    <p class="list-group-item-text">${item.desc}</p>
                </a>`
                }
            }
            html += `<div class="list-group">${itemHtml}</div>`
        }
        $('.leftList').html(html);
    }





    $('.list-group-item').click(function(e){
            e.preventDefault()
            e.stopPropagation()
            var href = $(this).attr('href');

            $('#iframe').attr('src',href+"?t="+(new Date).toTimeString() )
        return false;
    })


</script>

</body>
</html>